<template>
  <div class="page_box">
    <el-pagination
      v-model:currentPage="pageData.page"
      :page-sizes="[15, 25, 50, 100]"
      v-model:page-size="pageData.page_size"
      background
      layout="slot, prev, pager, next, sizes"
      :total="pageData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
      <span class="total">
        共 <i>{{ pageData.total?.toLocaleString?.() }}</i> 条
      </span>
    </el-pagination>
  </div>
</template>
<script lang="ts" setup>
  import { defineEmits, withDefaults, defineProps } from 'vue'
  interface Props {
    pageData: {
      page?: number
      page_size?: number
      total?: number
    }
  }
  const props = withDefaults(defineProps<Props>(), {
    pageData: () => ({ page: 1, page_size: 15, total: 0 })
  })
  const emit = defineEmits(['submit'])
  const handleSizeChange = (v: number) => {
    emit('submit', { page: props.pageData.page, page_size: v })
  }
  const handleCurrentChange = (v: number) => {
    emit('submit', { page: v, page_size: props.pageData.page_size })
  }
</script>
<style lang="scss" scoped>
  .page_box {
    margin: 10px 0;
    width: 100%;
    text-align: right;
    .el-pagination {
      justify-content: flex-end;
      > :last-child {
        margin-right: 0;
      }
    }
    .total {
      font-weight: normal;
      font-family: var(--tabel-text-family);
      margin-right: 24px;
      i {
        font-style: normal;
        color: var(--main-color);
      }
    }
  }
</style>
